<template>    
    <div>
        <div class="calendar-header">
            <div>
                <el-icon @click="prevYear" class="iconBtn"><DArrowLeft /></el-icon>
                <el-icon @click="prevMonth" class="iconBtn"><ArrowLeft /></el-icon>
            </div>
            <div style="font-size: 16px;" class="date">
                <span class="years">
                    <el-select-v2
                        v-model="year"
                        :options="yearsList"
                        :item-height="28"                        
                        :teleported="false"                        
                        :suffix-icon="null"
                        style="width: 120px;"
                        :offset="5"
                        @change = "confirmYear"
                    />
                    <!-- <input v-model="year" @blur="confirmYear" @keydown.enter="confirmYear" @input="(event:Event) => handleInput(event,'year')"/>
                    <span>年</span> -->
                </span>
                <span class="months">
                    <el-select v-model="month" style="width: 100px;" :suffix-icon="null" :teleported="false" @change="confirmMonth">
                         <el-option
                            v-for="item in monthsList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                    <!-- <input v-model="displayMonth" @blur="confirmMonth" @keydown.enter="confirmMonth" @input="(event:Event) =>handleInput(event,'month')"/>                    
                    <span>月</span> -->
                </span>
            </div>
            <div>
                <el-icon @click="nextMonth" class="iconBtn"><ArrowRight /></el-icon>
                <el-icon @click="nextYear" class="iconBtn"><DArrowRight /></el-icon>
            </div>
        </div>
        <div class="calendar-body">
            <div class="weekdays">
                <div>日</div>
                <div>一</div>
                <div>二</div>
                <div>三</div>
                <div>四</div>
                <div>五</div>
                <div>六</div>
            </div>
            <div class="days">
                <div v-for="day in daysInMonth"
                    class="dayItem"
                    :class="{ 'not-current-month': day.value < startOfMonth || day.value > endOfMonth,'current-day': day.value === today.format('YYYYMMDD') }"
                    @click="selectDate(day)">
                    <div :class="{ selected: day.value === selectedDateValue && day.value >= startOfMonth && day.value <= endOfMonth }">
                        {{ day.label }}
                    </div>
                </div>
            </div>
        </div>
    </div>    
</template>

<script setup lang="ts">
import moment from 'moment';
import { ArrowLeft, ArrowRight, DArrowLeft, DArrowRight } from '@element-plus/icons-vue';
import {correctDate} from './correctDate';

const emit = defineEmits(['changeValue']);
const props = defineProps({
    selectedDate: String
});
const monthsList = [
    { value: 0, label: '1月' },
    { value: 1, label: '2月' },
    { value: 2, label: '3月' },
    { value: 3, label: '4月' },
    { value: 4, label: '5月' },
    { value: 5, label: '6月' },
    { value: 6, label: '7月' },
    { value: 7, label: '8月' },
    { value: 8, label: '9月' },
    { value: 9, label: '10月' },
    { value: 10, label: '11月' },
    { value: 11, label: '12月' },
];
const yearsList = Array.from({ length: 1050 }).map((_, idx) => ({
    value: idx + 1949,
    label: `${idx + 1949}年`,
}))
let selectedDateValue = props.selectedDate;
const today = moment();
const year = ref();
const month = ref();
const startOfMonth = ref();
const endOfMonth = ref();
const daysInMonth = ref<{ value: string; label: string; }[]>([]);
const init = ()=>{
    const dateObj = correctDate(selectedDateValue);
    year.value = dateObj.year;
    month.value = dateObj.month;    
    calcCalendar(); 
}
const calcCalendar = ()=>{
    daysInMonth.value.length = 0;
    const start = moment([year.value, month.value]).startOf("month");
    const end = moment([year.value, month.value]).endOf("month");    
    startOfMonth.value = start.format('YYYYMMDD');
    endOfMonth.value = end.format('YYYYMMDD');
    const startDayOfWeek = moment(start).isoWeekday(); // 获取月份第一天是星期几
    // const endDayOfWeek = moment(endOfMonth).isoWeekday(); // 获取月份最后一天是星期几
    const diffDays  = end.diff(start,'days') + 1;
    start.subtract(startDayOfWeek, 'days');
    end.add(42-diffDays-startDayOfWeek, 'days');
    for (let date = start; date <= end; date.add(1, 'days')) {
        daysInMonth.value.push({
            value: date.format('YYYYMMDD'),
            label: date.format('D'),
        });        
    }
    // const startOfWeek = startOfMonth - startDayOfWeek;
    // const endOfWeek = endOfMonth - endDayOfWeek;    
}
const prevMonth = () => {
    if (month.value > 0) {
        month.value -= 1;
    } else {
        month.value = 11;
        year.value -= 1;
    }
    calcCalendar();
};

const nextMonth = () => {
    if (month.value < 11) {
        month.value += 1;
    } else {
        month.value = 1;
        year.value += 1;
    }
    calcCalendar();
};

const prevYear = ()=>{
    year.value -= 1;
    calcCalendar();
};
const nextYear = ()=>{
    year.value += 1;
    calcCalendar();
};
const selectDate = (day:{ value: string; label: string; }) => {
    emit('changeValue',day.value);        
};
const confirmYear = ()=>{    
    calcCalendar();
}
const confirmMonth = ()=>{
    calcCalendar();
}

onMounted(()=>{
    init();    
})
</script>

<style scoped lang="scss">
.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    padding: 12px 12px 0;    
}
.calendar-body{
    width: 330px;
    padding: 8px 15px 15px 15px;
}
.weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);        
    height: 38px;
    align-items: center;
    justify-items: center;
    // border-bottom: 1px solid var(--el-border-color-light);
}
.days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);             
    .dayItem{
        height: 38px;            
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        div{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 24px;
            height: 24px;
            border-radius: 50%;
        }
        .selected{
            background-color: var(--el-color-primary);
            color:#fff;    
        }
    }
}
.years{
    margin-right: -15px;
    cursor: pointer;
    &:hover{
        color: var(--el-color-primary);
    }
    input{
        width: 50px;
        text-align: center;
        border: none;
    }
    :deep(.el-select-dropdown__item){
        width: 100px !important;
        padding: 0 20px 0 20px;
        text-align: center;
    }
}
.months{
    margin-left: -20px;
}
.date{    
    :deep(.el-select__wrapper){
        padding: 0;
        font-size: 16px;
        box-shadow: none;
        text-align: center;
        gap:0;
        .el-select__suffix{
            display: none;
        }       
        .el-select__placeholder.is-transparent{
            color: var(--el-color-primary);
        }
        .el-select__selected-item:hover{
            color: var(--el-color-primary);
        }
    }
    :deep(.el-select-dropdown){
        padding: 5px 0 5px 10px;
        .el-select-dropdown__wrap{
            height: 200px;
            .el-select-dropdown__list{
                padding: 0;
                margin-right: 10px;
            }
            .el-select-dropdown__item{
                padding: 0 25px;
                text-align: center;
            }
        }
    }            
}
.iconBtn{
    cursor: pointer;    
    width: 24px;
}
.iconBtn:hover{
    color: var(--el-color-primary);
}
.not-current-month{
    color: var(--el-text-color-placeholder)
}
.current-day{
    color: var(--el-color-primary);
    font-weight: 600;
}
</style>